<template>
  <el-dialog
    v-model="dialogVisible"
    title="统计详情"
    width="800"
    :before-close="handleClose"
  >
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="countryName" label="国家">
            <template #default="scope">
                <div v-if="scope.row.countryName && scope.row.countryCode">
                    {{ `${scope.row.countryName}（${scope.row.countryCode}）` }}
                </div>
                <div v-else>
                    未知
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="totalNumbers" label="号码总数">
            <template #default="scope">
                {{ scope.row.totalNumbers || '--' }}
            </template>
        </el-table-column>
        <el-table-column prop="codeReceivedNumbers" label="收到验证码数">
            <template #default="scope">
                {{ scope.row.codeReceivedNumbers || '--' }}
            </template>
        </el-table-column>
        <el-table-column prop="successNumbers" label="成功数">
            <template #default="scope">
                {{ scope.row.successNumbers || '--' }}
            </template>
        </el-table-column>
        <el-table-column prop="successRate" label="成功率">
            <template #default="scope">
                {{ scope.row.successRate || '--' }}
            </template>
        </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import useToggle from "@/hooks/useToggle";

const [dialogVisible, ,toggleDialogVisible] = useToggle(false);
const [loading,,toggleLoading] = useToggle(false);

const handleClose = () => {
  toggleDialogVisible();
};

const tableData = ref([])
const init = (data) => {
    console.log(data)
    tableData.value = data
    toggleDialogVisible(true)
}

defineExpose({
    init
})
</script>
